<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">编号名称:</p>
			</el-col>
			<el-col :span="4">
				<el-input v-model="value" size="small" placeholder="请输入编号或名称">
				</el-input>
			</el-col>
			<el-col :span="1" style="margin-left: -10px;text-align: right;">
				<el-button type="primary" size="small" v-on:click='query'>查询</el-button>
			</el-col>
			<el-col :span="18" style="text-align: right;">
				<el-button type="primary" size="small" v-on:click='add'>新增</el-button>
				<el-button type="primary" size="small" v-on:click='edit'>编辑</el-button>
				<el-button type="primary" size="small" v-on:click='start'>启用</el-button>
				<el-button type="primary" size="small" v-on:click='stop'>停用</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-table :data="tableData.dataList" @selection-change="tablechange" border  @row-dblclick="dbReshowQuForm">
				<el-table-column type="selection" width="80"></el-table-column>
				<el-table-column prop="quesitonCode" label="问卷编号"></el-table-column>
				<el-table-column prop="quesitonName" label="问卷名称"></el-table-column>
				<el-table-column prop="quesitonType" label="问卷类型"></el-table-column>
				<el-table-column prop="dispOrder" label="显示顺序"></el-table-column>
				<el-table-column prop="status" label="状态" :formatter="statusCov"></el-table-column>
			</el-table>
			<el-pagination small 
				@size-change="handleSizeChange" 
				@current-change="handleCurrentChange" 
				:current-page="CurentPage" :page-sizes="page.pageSizes" 
				:page-size="page.pageSize" 
				layout=" total,prev, pager, next" 
				:total="tableData.total">
			</el-pagination>
		</el-row>
		<el-dialog title="生成问卷" v-model="questionFormShow">
			<div style="border-bottom: 1px solid #000000;">
				<el-form :model="questionFormData" ref="questionForm" :rules="questionRlue">
					<el-row>
						<el-col :span="12">
							<el-form-item label="问卷编号:" prop="quesitonCode">
								<el-input size="small" placeholder="" style="width: 50%;" v-model="questionFormData.quesitonCode">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="问卷名称:" prop="quesitonName">
								<el-input size="small" placeholder="" style="width: 50%;" v-model="questionFormData.quesitonName">
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="问卷类型:" prop="quesitonType">
								<el-input size="small" placeholder="" style="width: 50%;" v-model="questionFormData.quesitonType">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="显示顺序:" prop="dispOrder" required>
								<el-input-number v-model="questionFormData.dispOrder" style="width: 50%;" :min="1" :max="999"></el-input-number>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer" style="text-align: right;">
					<el-button type="primary" @click="save">生成问卷</el-button>
				</div>
			</div>
			<div>
				<el-row :gutter="24">
					<el-col :span="8">
						<el-tree :data="TreeData" 
							:filter-node-method="filterNode" 
							:highlight-current=true 
							:props="defaultProp" 
							accordion 
							@node-click="handleNodeClick" 
							:auto-expand-parent='false' 
							ref="dictTree" 
							node-key="id"></el-tree>
					</el-col>
					<el-col :span="16">
						<el-table :data="questionTableData" border @row-dblclick="dbClick" style="height: 250px;">
							<el-table-column prop="itemName" label="项目名称">
							</el-table-column>
							<el-table-column prop="dispOrder" label="优先级">
							</el-table-column>
							<el-table-column prop="score" label="分数">
							</el-table-column>
						</el-table>
						<span style="font-size: 15px;margin: 10px 0;display: block;">评分项:</span>
						<el-table :data="questionScoreData" border style="height: 250px;">
							<el-table-column prop="areaCode" label="编号">
							</el-table-column>
							<el-table-column prop="areaName" label="名称">
							</el-table-column>
							<el-table-column prop="score" label="分数">
								<template scope="scope">
									<el-input-number style="width: 100px!important"
									                 size="small"
									                 v-model="scope.row.score" 
									                 :min="0"
									                 :max="999"></el-input-number>
								</template>
								<!--<template scope="scope">
									<el-button type="text" v-on:click="scoreChange(scope.$index)"> {{scope.row.score}}</el-button>
								</template>-->
							</el-table-column>
							<el-table-column prop="" label="操作">
								<template scope="scope">
									<el-tooltip class="item"
									            effect="light"
									            content="保存"
									            placement="top">
										<el-button type="primary"
										           size="mini" style="font-size: 13px;"
										           class="iconfont icon-save"
										           @click.native.prevent="saveScore(scope.$index)"></el-button>
									</el-tooltip>
								</template>
							</el-table-column>
						</el-table>
						<!--<div >
							<el-input v-model="changeScore" size="small" style="width:100px"></el-input>
							<el-button type="primary" @click="saveScore">保存</el-button>
						</div>-->
					</el-col>
				</el-row>
				<div slot="footer" class="dialog-footer" style="text-align: right;">
					<el-button type="primary" @click="">预览</el-button>
					<el-button type="primary" @click="questionFormShow = false">取消</el-button>
					<el-button type="primary" @click="saveTable">提交</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog v-model="shuShow">
			<!--<el-tree :data="paramTreeData"
				  show-checkbox
				  check-strictly
				   :highlight-current=true
				    :props="defaultProps"
				     accordion
				      :auto-expand-parent=false
				       ref="dictTree"
				        node-key="value"></el-tree>-->
				        
				        <el-tree
						  :data="paramTreeData"
						  show-checkbox
						  default-expand-all
						  node-key="value"
						  ref="dictTree"
						  highlight-current
						  :props="defaultProps">
						</el-tree>
		    <div slot="footer" class="dialog-footer" style="text-align: right;">
					<el-button type="primary" @click="shuShow = false">取消</el-button>
					<el-button type="primary" @click="saveTree">提交</el-button>
			</div>
		</el-dialog>
		<el-dialog v-model="quFormShow">
			<el-collapse v-model="activeName" accordion>
			  <el-collapse-item title="服务" name="1">
			  	<el-form ref="form" :model="form" label-width="80px">
			  		 <el-form-item label="接待服务">
					    <el-checkbox-group v-model="reshowData.service.jiedaiservice">
					      <el-checkbox label="满意" name="type"></el-checkbox>
					    </el-checkbox-group>
					  </el-form-item>
				    <el-form-item label="等待时长">
					    <el-radio-group v-model="reshowData.service.waitingtime">
					      <el-radio label="一般"></el-radio>
					      <el-radio label="基本满意"></el-radio>
					      <el-radio label="十分满意"></el-radio>
					      <el-radio label="非常满意"></el-radio>
					    </el-radio-group>
					  </el-form-item>
				</el-form>
			  </el-collapse-item>
			  <el-collapse-item title="技术" name="2">
			    <div>维修技术</div>
			  </el-collapse-item>
			</el-collapse>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				//问卷预览的当前名
				activeName:'1',
				//改变分数绑定值
				changeScore:'',
				//改变分数所在行数保存
				rowNum:'',
				//改变分数显示
				divShow:false,
				shuShow: false,
				resTreeShow: false,
				//问卷预览弹框
				quFormShow:false,
				//分页
				CurentPage: 1,
				page: this.page,
				//查询条件
				value: '',
				//表单数据
				tableData: {
					total: 0,
					dataList: []
				},
				//问题项表单数据
				questionTableData: [],
				//评分项表单数据
				questionScoreData: [],

				//复选框选择数据
				selectData: [],
				//树型数据
				paramTreeData: [],
				TreeData:[],
				reshowData:{
					service:{
						waitingtime:'',//等待时长，单选框
						jiedaiservice:[],//接待服务复选框
					}
				},
				//树型数据配置
				defaultProps: {
					children: 'child',
					label: 'label'
				},
				defaultProp:{
					children: 'child',
					label: 'groupName'
				},
				//form表单显示
				questionFormShow: false,
				//form表单数据
				questionFormData: {
					id: '',
					quesitonCode: '',
					quesitonName: '',
					quesitonType: '',
					dispOrder: '',
				},
				//form表单初始化
				emptyFormData: {
					id: '',
					quesitonCode: '',
					quesitonName: '',
					quesitonType: '',
					dispOrder: '1',
				},
				//form表单校验规则
				questionRlue: {
					quesitonCode: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
					quesitonName: [{
						required: true,
						message: '请输入父级编码',
						trigger: 'blur'
					}],
					quesitonType: [{
						required: true,
						message: '请输入编码',
						trigger: 'blur'
					}],
				},
				//生成问题id
				currentRoleId:'',
			}
		},
		methods: {
			//改变分数
			scoreChange: function(index) {
				this.$data.divShow = true;
				this.$data.changeScore = this.$data.questionTableData[index].score;
				this.$data.rowNum = index;
			},
			//保存分数
			saveScore:function(){
				this.$data.questionTableData[this.$data.rowNum].score = this.$data.changeScore;
				this.$data.rowNum = '';
				this.$data.divShow = false;
			},
			tablechange: function(val) {
				this.$data.selectData = val;
			},
			//fenye 
			handleSizeChange: function() {

			},
			handleCurrentChange: function(CurentPage) {
				this.$data.CurentPage = CurentPage;
				this.query();
			},
			//查询
			query: function() {
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/cartag/page', //url
					params: { //发送的参数
						value: this.$data.value,
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize,
					}
				}).then(function(resp) {
					debugger;
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						this.$data.tableData = resp.data;
					} else {
						this.$message.error(resp.data.msg);
					}

				}, function(error) {

				})

			},
			//新增
			add: function() {
				this.$data.questionFormData = Object.assign(this.$data.questionFormData, this.$data.emptyFormData);
				this.$data.questionFormShow = true;
				this.$data.questionTableData = [];
				this.$data.questionScoreData = [];
			},
			//编辑
			edit: function() {
				this.$data.questionTableData = [];
				this.$data.questionScoreData = [];
				if(this.$data.selectData.length == 1) {
					var data = this.$data.selectData[0].id;
					this.$http({
						method: 'GET',
						url: this.API_ROOT + '/crm/cartag/info',
						params: {
							id: data,
						}
					}).then(function(resp) {
						this.$data.questionFormData = Object.assign(this.$data.questionFormData, resp.data.data);
						this.$data.questionFormShow = true;
					}, function(error) {
						// error
					})
				} else {
					this.$message.error("请选择一条数据")
				}

			},
			//停用
			stop: function() {
				if(this.$data.selectData.length == 1) {
					var data = this.$data.selectData[0].id;
					this.$http({
						method: 'GET',
						url: this.API_ROOT + '/crm/cartag/stop',
						params: {
							id: data,
						}
					}).then(function(resp) {
						this.$message(resp.data.msg);
						this.query();
					}, function(error) {
						// error
					})
				} else {
					this.$message.error("请选择一条数据")
				}

			},
			//启用
			start: function() {
				if(this.$data.selectData.length == 1) {
					var data = this.$data.selectData[0].id;
					this.$http({
						method: 'GET',
						url: this.API_ROOT + '/crm/cartag/start',
						params: {
							id: data,
						}
					}).then(function(resp) {
						this.$message(resp.data.msg);
						this.query();
					}, function(error) {
						// error
					})
				} else {
					this.$message.error("请选择一条数据")
				}

			},
			//保存
			save: function() {
				this.$refs.questionForm.validate(function(valid) {
					if(valid) {
						this.$data.currentRoleId = this.$data.questionFormData.quesitonCode;
						this.$http.post(this.API_ROOT + '/crm/cartag/save', this.$data.questionFormData, {
							params: {
								id: this.$data.id,
							}
						}).then(resp => {
							if(resp.data.success) {
								this.$message(resp.data.msg);
								this.query();
								this.$data.shuShow = true;
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						})
					}
					return false;
				}.bind(this));

			},
			//提交
			saveTable: function() {

			},
			//提交选中树
			saveTree: function(){
				debugger;
			var checkNodes = this.$refs.dictTree.getCheckedKeys();
			var data = {
				data: JSON.stringify(checkNodes),
			}
			this.$http({
				method: 'POST',
				url: this.API_ROOT + '/crm/cartag/saveItemTree',
				body: checkNodes,
				params: {
					questionId: this.$data.currentRoleId,
				}
			}).then(function (resp) {
				this.$message(resp.data.msg);
				if (resp.data.success) {
					this.$data.shuShow = false;
					this.$data.TreeData = resp.data.dataList;
				}
			}, function (error) {
				// error
			})
			},
			//状态转换
			statusCov: function(row, column) {
				if(row.status == 0) return "已启用";
				return "已停用";
			},
			//资源过滤
			filterNode: function(value, data, node) {
				if(!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			//点击资源树节点
			handleNodeClick: function(data) {
				debugger;
				//			this.$data.curentPCode = data.tagCode;
				//			this.$data.curentPName = data.tagName;
				//			this.queryParamGrid();
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/cartag/groupPage', //url
					params: { //发送的参数
						questionId: this.$data.currentRoleId,
						groupCode : data.groupCode,
					}
				}).then(function(resp) {
					debugger;
					if(resp.data.success) {
						this.$data.questionTableData = resp.data.dataList;
					} else {
						this.$message.error(resp.data.msg);
					}

				}, function(error) {

				})
			},
			//wentixiang shuangji shijian 
			dbClick: function(row, event){
				debugger;
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/cartag/itempage', //url
					params: { //发送的参数
						itemId : row.id,
					}
				}).then(function(resp) {
					debugger;
					if(resp.data.success) {
						this.$data.questionScoreData = resp.data.dataList;
					} else {
						this.$message.error(resp.data.msg);
					}

				}, function(error) {

				})
			},
			//双击表格预览问卷
			dbReshowQuForm:function(row, event){
				debugger;
				this.$data.quFormShow=true; 
			}
		},
		created: function() {
			this.query();
			//获取资源树
		    this.$http.get(this.API_ROOT + '/crm/cartag/leftTree', {

		    }).then((response) => {
		    	debugger;
			    this.$data.paramTreeData = response.data.dataList;
		    }, (response) => { });

		}
	}
</script>

<style>

</style>